<template>
	<view style="height: 100%;">
		<!-- ====== begin 轮播图功能 ====== -->
		<view class="swiper" v-if="slideImgs.length" style="background-color: #FFFFFF;">
			<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
				:duration="duration" indicator-color="#E4E4E4" indicator-active-color="#E93323" previous-margin="40rpx"
				next-margin="40rpx" :current="swiperCur" @change="swiperChange">
				<block v-for="(item, index) in slideImgs" :key="index">
					<swiper-item :class="{ active: index == swiperCur }">
						<view @click="goUrl(item.url)" class="slide-navigator acea-row row-between-wrapper">
							<image :src="item.pic" class="slide-image"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- ====== end 轮播图功能 ====== -->
		
		
		<!-- ====== begin 排序功能 ====== -->
		<view class="sort">
			<view :class="{on: sortCur==1}" @click="onChangeSort(1)">附近</view>
			<view :class="{on: sortCur==2}" @click="onChangeSort(2)">评价</view>
			<view :class="{on: sortCur==3}" @click="onChangeSort(3)">关注</view>
		</view>
		<!-- ====== end 排序功能 ====== -->
		
		
		<!-- ====== begin FshGround列表功能 ====== -->
		<scroll-view scroll-y scroll-with-animation @scrolltolower="onScrollToLower" lower-threshold="2"> <!-- @scrolltolower="onScrollToLower" lower-threshold="2": ScrollView加载更多功能 ====== -->
			<view v-for="(fshmer, index) in fshMers"
				style="display: flex; align-items: center; padding: 11px 11px; background-color: white; border-radius: 6rpx; margin: 0rpx 20rpx; margin-top: 20rpx; "
				@click="goMerHome(fshmer)">
				<image style="width: 150upx; height: 150upx; border-radius: 16rpx; " :mode="imgMode" :src="fshmer.shopAvatar">
				</image>
				<view style="flex: 1; margin: 0rpx 20rpx; ">
					<view><text style="font-weight: bold; color: #333333; font-size: 36upx;">{{fshmer.shopName}}</text>
					</view>
					<view style="margin: 20rpx 0rpx; font-size: small;">{{fshmer.shopCareCount}}</view>
					<view style="margin: 20rpx 0rpx; font-size: small;"><uni-rate :readonly="true" :value="fshmer.score/10" /></view>
					<view style="margin: 20rpx 0rpx; font-size: small;">{{fshmer.shopAddress}}</view>
				</view>
				<span class="iconfont">&#xe6bd;</span>
			</view>
			<jade-mp-privacy></jade-mp-privacy>

			<!-- ====== begin ScrollView加载更多功能 ====== -->
			<view class="loading_text">
				<text>{{loadMoreText}}</text>
			</view>
			<!-- ====== end ScrollView加载更多功能 ====== -->
		</scroll-view>
		<!-- ====== end FshGround列表功能 ====== -->
		
		<!-- ====== begin 悬浮按钮 ====== -->
		<view class="fix-btn add" @click="onTapBtnAddMer">
			<text>添加</text><text>渔具店</text>
		</view>
		<!-- ====== end 悬浮按钮 ====== -->
	</view>
</template>

<script>
	import { setStorage, getStorage, removeStorage } from '../../libs/uniApi.js';
	import {
		MyTip
	} from '@/components/ssty/common.js';
	import {
		querySlideImgs,
		queryShops
	} from '@/api/fsh.js';
	const app = getApp();

	export default {
		data() {
			return {
				// ====== begin 轮播图功能 ======
				slideImgs: [],
				swiperCur: 0,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				// ====== end 轮播图功能 ======
				
				// ====== begin 排序功能 ======
				sortCur: 1,
				// ====== end 排序功能 ======
				
				// ====== begin FshGround列表功能 ======
				imgMode: 'aspectFit',
				fshMers: [],
				// ====== begin ScrollView加载更多功能 ======
				pageNum: 1,
				pageCount: 1,
				loadMoreText: "上拉加载更多",
				// ====== end ScrollView加载更多功能 ======
				// ====== end FshGround列表功能 ======
			}
		},
		onLoad() {
			// ====== begin 轮播图功能 ======
			getStorage("mer_slide_imgs", (data)=>{
				this.slideImgs = data;
			});
			querySlideImgs(2).then(res => {
				this.slideImgs = res.entity;
				setStorage("mer_slide_imgs", this.slideImgs);
			}).catch(err => {
				console.log("querySlideImgs fail", err);
			});
			// ====== end 轮播图功能 ======
			
			
			// ====== begin FshGround列表功能 ======
			this.loadFshGrounds(1, (data) => {
				this.imgMode = data.imgMode;
				this.fshMers = data.list;
				
				// ====== begin ScrollView加载更多功能 ======
				this.pageNum = 1;
				this.pageCount = data.pageCount;
				this.loadMoreText = (this.pageNum < this.pageCount) ? "上拉加载更多" : "~ 没有更多数据了 ~";
				// ====== end ScrollView加载更多功能 ======
			});
			// ====== end FshGround列表功能 ======
		},
		onShow() {
			// ====== begin 按地理位置排序功能 ======
			if(1 === this.sortCur) {
				const that = this;
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						that.getLocationInfo();
					},
					fail(){    // 拒绝授权
						that.openConfirm();
					}
				})
			}
			// ====== end 按地理位置排序功能 ======
		},
		methods: {
			// ====== begin 轮播图功能 ======
			// swiper
			swiperChange(e) {
				// this.swiperCur = e.detail.current
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					//根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
					this.swiperCur = e.detail.current;
				}
			},
			/*点击轮播图跳转*/
			goUrl(url) {
				let isHttp = url.substring(0, 4) == 'http' ? true : false;
				if (isHttp) {
					// #ifdef H5
					location.href = url;
					// #endif
					// #ifndef H5
					uni.switchTab({
						url: url
					});
					// #endif
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			// ====== end 轮播图功能 ======
			
			
			// ====== begin 排序功能 ======
			onChangeSort(sortNew) {
				this.sortCur = sortNew;
				
				this.loadFshGrounds(1, (data) => {
					this.imgMode = data.imgMode;
					this.fshMers = data.list;
					
					// ====== begin ScrollView加载更多功能 ======
					this.pageNum = 1;
					this.pageCount = data.pageCount;
					this.loadMoreText = (this.pageNum < this.pageCount) ? "上拉加载更多" : "~ 没有更多数据了 ~";
					// ====== end ScrollView加载更多功能 ======
				});
			},
			// ====== end 排序功能 ======
			
			
			// ====== begin FshGround列表功能 ======
			// 加载FshGround列表
			loadFshGrounds(pageNum, cbDone) {
				// uni.showLoading({
				// 	title: '努力加载中...'
				// });
				queryShops(this.sortCur, pageNum).then(res => {
					console.log("fsh_ground_main::loadFshGrounds ok, res=%o", res)
					// uni.hideLoading();
					if (cbDone) {
						cbDone(res.entity);
					}
				}).catch(err => {
					console.log("fsh_ground_main::loadFshGrounds fail, err=%o", err)
					// uni.hideLoading();
					if (cbDone)
						cbDone(false);
					MyTip(err.msg);
				});
			},
			// 上拉刷新，重新加载第一页
			// onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新 https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page
			// 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			onPullDownRefresh() {
				console.log("fsh_ground_main::onPullDownRefresh, loadFshGrounds ...");
				this.loadFshGrounds(1, (data) => {
					this.imgMode = data.imgMode;
					this.fshMers = data.list;
					this.pageNum = 1;
					this.pageCount = data.pageCount;
					uni.stopPullDownRefresh();
				});
			},
			// 触底刷新，加载下一页
			// onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据 https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page
			// onReachBottom() { // 注：FshGround使用scroll-view后，这个就不需要了
			// 	console.log("fsh_ground_main::onReachBottom, loadFshGrounds ..., page="+(this.pageNum + 1));
			// 	this.loadFshGrounds(this.pageNum + 1, (data) => {
			// 		if (data) {
			// 			this.pageNum += 1;
			// 			this.fshMers.push(...data.list);
			// 		}
			// 	});
			// },
			// 进店
			goMerHome(item) {
				uni.navigateTo({
					url: `/pages/shop/shop_home?shopId=${item.id}`
				})
			},
			
			// ====== begin ScrollView加载更多功能 ======
			onScrollToLower() { // ScrollView滚动到底部
				if(this.pageNum >= this.pageCount)
					return;
				console.log("fsh_ground_main::onScrollToLower, loadFshGrounds ..., pageNum=%o, pageCount=%o", this.pageNum + 1, this.pageCount);
				this.loadMoreText = "加载中...";
				clearTimeout(this.loadMoreTimer);
				this.loadMoreTimer = setTimeout(()=>{
					this.loadFshGrounds(this.pageNum + 1, (data) => {
						this.pageNum += 1;
						this.fshMers.push(...data.list);
						this.loadMoreText = (this.pageNum < this.pageCount) ? "上拉加载更多" : "~ 没有更多数据了 ~";
					});
				}, 1000);
			},
			// ====== end ScrollView加载更多功能 ======
			
			// ====== end FshGround列表功能 ======
			
			
			// ====== begin 按地理位置排序功能 ======
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，获得附近钓场信息，请确认授权',
					success: (res)=> {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '您拒绝了授权，将无法获得附近钓场信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
			getLocationInfo() {  // 获取用户地理位置
				uni.getLocation({
					type: 'wgs84',
					success (res) {
						console.log(res); // {accuracy: 65,errMsg: "getLocation:ok",horizontalAccuracy: 65,latitude: 22.53332,longitude: 113.93041,speed: -1,verticalAccuracy: 65}
					}
				});
			},
			// ====== end 按地理位置排序功能 ======
			
			
			// ====== begin 悬浮按钮 ======
			onTapBtnAddMer() {
				uni.navigateTo({
					url: '/pages/shop/shop_edit?shopEditType=1'
				});
			},
			
			onTapBtnMyMer() {
				uni.navigateTo({
					url: '/pages/shop/shop_edit?shopEditType=2'
				}); 
			}
			// ====== end 悬浮按钮 ======
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f5f5f5;
	}


	// ====== begin 轮播图功能 ======
	$swiperHeight: 320rpx;
	.swiper {
		position: relative;
		width: 100%;
		/* #ifdef MP  */
		height: auto;
		/* #endif */
		/* #ifdef H5 || APP-PLUS */
		height: $swiperHeight;
		/* #endif */
	
		margin: 0 auto;
		border-radius: 10rpx;
		overflow-x: hidden;
		/* #ifdef MP */
		z-index: 10;
	
		/* #endif */
		swiper,
		.swiper-item,
		image {
			width: 100%;
			height: 280rpx;
			border-radius: 10rpx;
		}
	
		.slide-navigator {}
	
		image {
			transform: scale(0.93);
			transition: all 0.6s ease;
		}
	
		swiper-item.active {
			image {
				transform: scale(1);
			}
		}
	}
	// ====== end 轮播图功能 ======
	

	// ====== begin 排序功能 ======
	.sort {
		display: flex;
		justify-content: space-around;
		background-color: white;
		view {
			padding: 20rpx 20rpx;
		}
		
		.on {
			color: red;
			border-bottom: 1rpx solid red;
		}
	}
	// ====== end 排序功能 ======
	
	
	// ====== begin FshGround列表功能 ======
	scroll-view {
		white-space: initial;
		height:calc(100vh - #{$swiperHeight}); // 对scss变量做calc计算不能直接使用$swiperHeight，要加#{}
	}
	
	.score-wrap {
		display: flex;
		align-items: center;
		font-weight: 500;
		font-size: 28rpx;
		color: $theme-color;

		.star {
			position: relative;
			width: 111rpx;
			height: 19rpx;
			margin-right: 10rpx;
			background: url(../columnGoods/images/star.png) left top/100% 100% no-repeat;
			overflow: hidden;

			view {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				background: url(../columnGoods/images/star_active.png) left top/111rpx 19rpx no-repeat;
			}
		}
	}
	
	// ====== begin ScrollView加载更多功能 ======
	.loading_text {
		display: flex;
		justify-content: center;
		font-size: 20upx;
		margin: 48upx 0 60upx;
		color: #979797;
	}
	// ====== end ScrollView加载更多功能 ======
	
	// ====== end FshGround列表功能 ======
	
	
	// ====== begin 悬浮按钮 ======
	.fix-btn {
		position: fixed;
		top: px;
		right: 20px;
		z-index: 1;
		color: #FFFFFF;
		background-color: #7468fb;
		
		width: 110rpx;
		height: 110rpx;
		border-radius: 110rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.fix-btn.add {
		bottom: 10px;
	}
	// ====== end 悬浮按钮 ======
</style>
